<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				border:1px solid red;
			}
			.bt_group{
				width:300px;
				height: 200px;;
				margin: auto;
			}
			#lunbo_con{
				width:300px;
				height: 200px;;
				margin: auto;
				background-color: red;
				position: relative;
			}
			#lunbo_con ul{
				list-style: none;
			}
			#lunbo_con ul li{
				width:300px;
				height: 200px;;
				background-color: blue;
				background-image: url(img/sea.jpg);
				background-size: 100% 100%;
				position: absolute;
				display: none;
			}
			.bt_group_radio{
				position: absolute;
				z-index: 100;
				bottom: 0;
			}
			.bt_group_radio .bt_radio{
				border-radius: 5px;
				width: 5px;
				height: 5px;
			}
			
		</style>
		
	</head>
	<body>
		<div id="lunbo_con">
			<ul class="img_con">
				<li style="display: block;">l1</li>
				<li>l2</li>
				<li>l3</li>
				<li>l4</li>
				<li>l5</li>
			</ul>
			<ul  class="bt_group_radio">
			</ul>
		</div>
		
		<div class="bt_group">
			<button id="pre">pre</button>
			<button id="next">next</button>
		</div>
		
				
			
		<script src="jquery/jquery-3.5.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var liImgAry = $("#lunbo_con .img_con li");
				var liImgLen = liImgAry.length;
				for (var i = 0; i < liImgLen; i++) {
					$(".bt_group_radio").append("<span data-id='"+i+"' class='bt_radio'>radio"+i+"</span>")
				}
				$(".bt_radio").on("click",function(){
					var data_id = $(this).attr("data-id");
					showImg(data_id);
					curIndex = data_id;
				})
				
				var curIndex = 0;//默认图下标
				$("#pre").on("click",function(){
					curIndex = curIndex - 1;
					if(curIndex < 0){
						curIndex = liImgLen - 1;
					}
					showImg(curIndex);
				})
				$("#next").on("click",function(){
					curIndex = curIndex + 1;
					if(curIndex > liImgLen - 1){
						curIndex = curIndex - liImgLen;
					}
					showImg(curIndex);
				})
				
				function showImg(index){
					liImgAry.hide();
					$(liImgAry[index]).fadeIn('slow');
				}
				var autoPlay = function(){
					curIndex--;
					if(curIndex < 0){
						curIndex = liImgLen - 1;
					}
					if(curIndex > liImgLen - 1){
						curIndex = curIndex - liImgLen;
					}
					showImg(curIndex);
				};
				//自动播放
				var autoPlayTime = setInterval(autoPlay,2000);
				$("#lunbo_con").on("mouseenter",function(){
					clearInterval(autoPlayTime);
				}).on("mouseleave",function(){
					autoPlayTime = setInterval(autoPlay,2000);
				})
			});
		</script>
		
		
	</body>
</html>
